<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title>基坑在线监测系统</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
      name="viewport"
    />
    <link rel="stylesheet" href="./css/uview.css" />
    <link rel="stylesheet" href="./css/main.css" />
  </head>
  <body>
    <header class="u-flex u-row-between">
      <h2>基坑在线监测系统</h2>
      <span>2022年 05月14日 星期六</span>
    </header>
    <div class="u-flex u-col-top u-row-between page-wrap">
      <!-- **************************************************左侧************************************************ -->
      <div class="page-left">
        <!-- 竖向位移 -->
        <div class="box-wrap table-wrap">
          <div class="title-wrap1">竖向位移</div>
          <table class="head">
            <colgroup>
              <col width="10%" />
              <col width="30%" />
              <col width="30%" />
              <col width="30%" />
            </colgroup>
            <tr>
              <th>点号</th>
              <th>本次沉降</th>
              <th>累计沉降量</th>
              <th>本次变化速率</th>
            </tr>
          </table>
          <div class="scroll">
            <table class="body">
              <colgroup>
                <col width="10%" />
                <col width="30%" />
                <col width="30%" />
                <col width="30%" />
              </colgroup>
              <tr>
                <td>J1</td>
                <td>0.12mm</td>
                <td>11.24mm</td>
                <td>0.008mm/d</td>
              </tr>
              <tr>
                <td>J2</td>
                <td>0.12mm</td>
                <td>11.07mm</td>
                <td>0.007mm/d</td>
              </tr>
              <tr>
                <td>J1</td>
                <td>0.12mm</td>
                <td>11.24mm</td>
                <td>0.008mm/d</td>
              </tr>
              <tr>
                <td>J2</td>
                <td>0.12mm</td>
                <td>11.07mm</td>
                <td>0.007mm/d</td>
              </tr>
              <tr>
                <td>J1</td>
                <td>0.12mm</td>
                <td>11.24mm</td>
                <td>0.008mm/d</td>
              </tr>
              <tr>
                <td>J2</td>
                <td>0.12mm</td>
                <td>11.07mm</td>
                <td>0.007mm/d</td>
              </tr>
              <tr>
                <td>J1</td>
                <td>0.12mm</td>
                <td>11.24mm</td>
                <td>0.008mm/d</td>
              </tr>
              <tr>
                <td>J2</td>
                <td>0.12mm</td>
                <td>11.07mm</td>
                <td>0.007mm/d</td>
              </tr>
              <tr>
                <td>J1</td>
                <td>0.12mm</td>
                <td>11.24mm</td>
                <td>0.008mm/d</td>
              </tr>
              <tr>
                <td>J2</td>
                <td>0.12mm</td>
                <td>11.07mm</td>
                <td>0.007mm/d</td>
              </tr>
            </table>
          </div>
        </div>
        <!-- 深层水平位移监测日报表 -->
        <div class="box-wrap">
          <div class="title-wrap3">深层水平位移监测日报表</div>
          <div class="chart" id="leftChart1"></div>
        </div>
        <!-- 深层水平位移监测日报表 -->
        <div class="box-wrap">
          <div class="title-wrap3">深层水平位移监测日报表</div>
          <div class="chart" id="leftChart2"></div>
        </div>
        <!-- 深层水平位移监测日报表 -->
        <div class="box-wrap">
          <div class="title-wrap3">深层水平位移监测日报表</div>
          <div class="chart" id="leftChart3"></div>
        </div>
      </div>
      <!-- **************************************************中间************************************************ -->

      <div class="page-middle">
        <div class="router-wrap">
          <img src="./images/img-path.png" alt="" />
        </div>
        <div class="box-wrap box-wrap2">
          <div class="title-wrap3">深层水平位移监测日报表</div>
          <div class="chart" id="chart1"></div>
        </div>
      </div>
      <!-- **************************************************右侧************************************************ -->
      <div class="page-right">
        <!-- 水平位移 -->
        <div class="box-wrap table-wrap">
          <div class="title-wrap1">水平位移</div>
          <table class="head">
            <colgroup>
              <col width="10%" />
              <col width="30%" />
              <col width="30%" />
              <col width="30%" />
            </colgroup>
            <tr>
              <th>点号</th>
              <th>本次位移</th>
              <th>累计位移</th>
              <th>本次变化速率</th>
            </tr>
          </table>
          <div class="scroll">
            <table class="body">
              <colgroup>
                <col width="10%" />
                <col width="30%" />
                <col width="30%" />
                <col width="30%" />
              </colgroup>
              <tr>
                <td>J1</td>
                <td>0.12mm</td>
                <td>11.24mm</td>
                <td>0.008mm/d</td>
              </tr>
              <tr>
                <td>J2</td>
                <td>0.12mm</td>
                <td>11.07mm</td>
                <td>0.007mm/d</td>
              </tr>
              <tr>
                <td>J1</td>
                <td>0.12mm</td>
                <td>11.24mm</td>
                <td>0.008mm/d</td>
              </tr>
              <tr>
                <td>J2</td>
                <td>0.12mm</td>
                <td>11.07mm</td>
                <td>0.007mm/d</td>
              </tr>
              <tr>
                <td>J1</td>
                <td>0.12mm</td>
                <td>11.24mm</td>
                <td>0.008mm/d</td>
              </tr>
              <tr>
                <td>J2</td>
                <td>0.12mm</td>
                <td>11.07mm</td>
                <td>0.007mm/d</td>
              </tr>
              <tr>
                <td>J1</td>
                <td>0.12mm</td>
                <td>11.24mm</td>
                <td>0.008mm/d</td>
              </tr>
              <tr>
                <td>J2</td>
                <td>0.12mm</td>
                <td>11.07mm</td>
                <td>0.007mm/d</td>
              </tr>
              <tr>
                <td>J1</td>
                <td>0.12mm</td>
                <td>11.24mm</td>
                <td>0.008mm/d</td>
              </tr>
              <tr>
                <td>J2</td>
                <td>0.12mm</td>
                <td>11.07mm</td>
                <td>0.007mm/d</td>
              </tr>
            </table>
          </div>
        </div>
        <!-- 深层水平位移监测日报表 -->
        <div class="box-wrap">
          <div class="title-wrap3">深层水平位移监测日报表</div>
          <div class="chart" id="bar1"></div>
        </div>
        <!-- 深层水平位移监测日报表 -->
        <div class="box-wrap">
          <div class="title-wrap3">深层水平位移监测日报表</div>
          <div class="chart" id="bar2"></div>
        </div>
        <!-- 预警信息 -->
        <div class="box-wrap">
          <div class="title-wrap1">预警信息</div>
          <div class="chart" id="chart2"></div>
        </div>
      </div>
    </div>
    <script src="./js/jquery.js"></script>
    <script src="./js/echarts.js"></script>
    <script src="./js/charts.js"></script>
    <script>
      $(() => {
        chartsLine1("chart1");
        chartsLine2("chart2");
        chartsLine3("leftChart1");
        chartsLine4("leftChart2");
        chartsLine5("leftChart3");
        chartsBar("bar1");
      });
    </script>
  </body>
</html>
